<template>
  <div class="platform-cache">
    <je-grid
      ref="xTable"
      align="center"
      stripe
      :row-config="{ keyField: 'id', isCurrent: true }"
      :data="tableData"
      size="small"
      border="outer"
      :loading="loading"
      show-overflow="ellipsis"
      @currentChange="currentChange"
    >
      <je-column type="seq" width="50" title="No."></je-column>
      <je-column field="name" title="缓存名称" width="150" type="html"></je-column>
      <je-column field="key" title="缓存键" width="200" type="html"></je-column>
      <je-column field="service" title="所属服务" width="150" type="html"></je-column>
      <je-column field="desc" title="描述" min-width="200" :resizable="false"></je-column>
      <template #tbar>
        <je-toolbar space="16">
          <div class="searchWrap">
            <je-input-search
              v-model:value.trim="searchValue"
              class="search"
              placeholder="搜索"
              allow-clear
              enter-button="搜索"
              style="width: 280px"
              @search="searchEvent"
            >
              <template #prefix> <i class="fal fa-search" /> </template>
            </je-input-search>
          </div>
          <je-tb-fill />
          <je-button type="primary" :disabled="btnFlag" @click="clearCache"
            ><i class="jeicon jeicon-broom"></i>清除缓存</je-button
          >
          <je-button type="primary" :disabled="btnFlag" @click="refresh"
            ><i class="jeicon jeicon-refresh"></i>刷新</je-button
          >
        </je-toolbar>
      </template>
    </je-grid>
  </div>
</template>

<script>
  import { defineComponent, onMounted, ref } from 'vue';

  import { Grid, Modal, Toolbar, Button } from '@jecloud/ui';

  import { clearAllCachesApi, getCachesApi } from '@/api';

  import XEUtils from 'xe-utils';

  export default defineComponent({
    name: 'PlatformCache',
    components: {
      JeGrid: Grid,
      JeColumn: Grid.Column,
      JeToolbar: Toolbar,
      JeButton: Button,
      JeTbFill: Toolbar.Fill,
    },
    setup() {
      const tableData = ref([]);
      const xTable = ref('');
      const loading = ref(false);
      // 获取缓存
      const getCaches = () => {
        loading.value = true;
        getCachesApi().then((res) => {
          tableData.value = res;
          loading.value = false;
        });
      };

      onMounted(() => {
        getCaches();
      });

      // 清除缓存
      let row = null;
      const clearCache = () => {
        if (!row) {
          return Modal.alert('请选择要清除的缓存项', 'info');
        }
        // Modal.confirm('您确定要清除当前缓存吗？', () => {
        clearAllCachesApi({ service: row.service, cacheKey: row.key }, { pd: row.service })
          .then((res) => {
            Modal.notice(res, 'success');
          })
          .catch((err) => {
            Modal.alert(err.message, 'error');
          });
        // });
      };

      // 刷新
      const refresh = () => {
        getCaches();
      };

      // 行点击
      const currentChange = ({ newValue }) => {
        row = newValue;
      };

      // 搜索
      const searchValue = ref(null);

      // 搜索事件
      const searchEvent = () => {
        const filterName = XEUtils.toValueString(searchValue.value).trim().toLowerCase();
        if (filterName) {
          let result = tableData.value;
          const filterRE = new RegExp(filterName, 'gi');
          const searchProps = ['name', 'key', 'service', 'desc'];
          const rest = result.filter((item) =>
            searchProps.some(
              (key) => XEUtils.toValueString(item[key]).toLowerCase().indexOf(filterName) > -1,
            ),
          );
          tableData.value = rest.map((row) => {
            const item = Object.assign({}, row);
            searchProps.forEach((key) => {
              item[key] = XEUtils.toValueString(item[key]).replace(
                filterRE,
                (match) => `<span class="keyword-lighten">${match}</span>`,
              );
            });
            return item;
          });
        } else {
          getCaches();
        }
      };

      return {
        tableData,
        loading,
        clearCache,
        xTable,
        refresh,
        currentChange,
        searchValue,
        searchEvent,
      };
    },
  });
</script>

<style lang="less" scoped>
  .platform-cache {
    padding: 14px;
    width: 100%;
    height: 100%;
    :deep(.je-panel-wrapper) {
      padding-bottom: 12px;
    }
    :deep(.je-panel-item.je-panel-item-region-default) {
      padding: 0 12px;
      overflow: hidden;
    }
    :deep(.je-panel-item.je-panel-bar.je-panel-item-region-top) {
      height: 56px;
      padding: 0 10px 0 8px;
    }
    :deep(.vxe-table--header .vxe-cell--checkbox-icon) {
      display: none;
    }
    :deep(.col--radio .vxe-cell) {
      height: 18px !important;
      width: 36px !important;
    }
    :deep(.keyword-lighten) {
      color: #ff0000;
    }
    .searchWrap {
      margin: 0 0 0 auto;
      .ant-input-search {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
      }
      .ant-input-affix-wrapper-focused {
        box-shadow: none !important;
      }
      .ant-btn {
        width: 60px;
        background: #3265f5;
      }
    }
  }
</style>
